<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加收货地址</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		
		body {
			background-color: #F3F3F3;
			width: 100%;
			height: 100%;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #F3F3F3;
		    -webkit-overflow-scrolling: touch;
		}
		.header-top-div {
			width: 100%;
			height: 156px;
			background-color: #F6B37F;
		}
		
		.header-bottom-div {
			width: 100%;
			height: 117px;
			background-color: #F3F3F3;
		}
		
		.setting-div {
			margin-top: 14px;
			margin-bottom: 80px;
			width: 100%;
			background-color: #FFFFFF;
		}
		
		.item-div {
			margin-left: 14px;
			margin-right: 14px;
			height: 59px;
			position: relative;
		}
		
		.item-span {
			flex: 1;
			font-size: 15px;
			color: #515151;
			line-height: 59px;
			font-family: "PingFang-SC-ExtraLight";
		}
		
		.item-icon {
			width: 20px;
			height: 20px;
			position: absolute;
			right: 0px;
			top: 22px;
		}
		
		.line-div {
			width: 92%;
			height: 1px;
			margin-left: 4%;
			background-color: #F3F3F3;
		}
		input[type=text] {
			padding: 0px;
		    float: right;
    			width: 70%;
			margin-top: 4px;
			margin-bottom: 0;
			height: 50px; 
			border-width: 0px;
			color:#515151;
			font-size: 15px;
			text-align: end;
			background-color: transparent;
		}
		::-webkit-input-placeholder{
		     font-size: 12px;
		     font-style: oblique;
		     text-align: end;
		}
		.display {
			display: flex;
		}
		.right-div {
			display: inline-block;
			float: right;
		}
		.right-span {
			line-height: 59px;
			font-size: 12px;
		    text-align: end;
		    color:#999;
		    font-style: oblique;
		}
		.attr-span-ed {
			line-height: 59px;
		    color:#515151;
			font-size: 15px;
			text-align: end;
		}
		.choose-img {
			width: 14px;
			height: 3px;
		    margin-bottom: 3px;
		}
	</style>

	<body>
		<div class="mui-content">
			<div class="setting-div">
				<div class="item-div">
					<span class="item-span">收货人姓名:</span>
					<input type="text" id="name" placeholder="点击输入姓名"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">手机号码:</span>
					<input type="text" id="phone" placeholder="点击输入电话号码"/>
				</div>

				<div class="line-div"></div>
				<div id="cityChoose" class="item-div">
					<span class="item-span">省、市、区</span>
					<div class="right-div">
						<span class="right-span" id="country">请选择地址</span>
						<img class="choose-img" src="../img/common/more_icon.png" />
					</div>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">详细地址</span>
					<input type="text" id="school" placeholder="点击输入详细地址"/>
				</div>
				<!--<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">宿舍楼</span>
					<input type="text" id="dormitory" placeholder="点击输入宿舍楼"/>
				</div>-->
			</div>
			<div class="bottom-div">
				<div class="back-div"><a class="mui-action-back" onclick="javascript:history.back(-1)"><img style="width: 10px; margin-top: 15px;" src="../img/common/back_icon.png" /></a></div>
				<div class="event-div">保 存</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/city.data.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/city.data-3.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript">
		"use strict";
		mui.init();
		var addrPicker = null;
		var userID = base.getParameter("userID");
		var addressID = base.getParameter("addressID");
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		(function($, doc) {
			$.init();
			$.ready(function() {
				if (addressID != "" && addressID != null) {
					getAddressInfo();
				}
				addrPicker = new $.PopPicker({
					layer: 3
				});
				addrPicker.setData(cityData3);
			});
		})(mui, document);
		function getAddressInfo () {
			var url = base.url.getAddressInfo;
			var data = {
				userID: userID,
				addressID: addressID
			}
			base.postData(url,data,getAddressInfoSuccess);
		}
		function getAddressInfoSuccess(data) {
			if (data.success) {
				addressID = data.context.address.addressID;
				var _address = data.context.address;
				$('#country').text(_address.provinceName+"-"+_address.cityName+"-"+_address.countyName);
				$("#name").val(data.context.address.consigneeName);
				$("#phone").val(data.context.address.consigneePhone);
				$("#school").val(data.context.address.campus);
//				$("#dormitory").val(data.context.address.dormitory);
			} else {
				mui.toast(data.msg);
			}
		}
		$("#cityChoose").on("tap", ".right-div", function() {
			document.activeElement.blur();
			addrPicker.show(function(items) {
				$("#country").attr("class", "attr-span-ed");
				var areaName = _getParam(items[0], 'text')  + "-" + _getParam(items[1], 'text')  + "-" + _getParam(items[2], 'text');
				$("#country").text(areaName);
				//返回 false 可以阻止选择框的关闭
				//return false;
			});
		})
		$(".bottom-div").on("tap", ".event-div", function() {
			var tempAddr = $("#country").text();				
			if($("#name").val() == null || $("#name").val() == "") {
				mui.toast("收货人姓名不能为空");
	        		return;
	        }			
			if(!checkPhone($("#phone").val())) {
				mui.toast("请输入正确的电话号码");
	        		return;
	        }
			if (tempAddr == '请选择地址') {
				mui.toast("请选择地址");
	        		return;
			}
			if($("#school").val() == null || $("#school").val() == "") {
				mui.toast("学校、校区不能为空");
	        		return;
	        }
//			if($("#dormitory").val() == null || $("#dormitory").val() == "") {
//				mui.toast("宿舍楼不能为空");
//	        		return;
//	        }
			document.activeElement.blur();
			base.setWait('正在获取数据...');
			var url = base.url.saveAddress;
			if (addressID != "" && addressID != null) {
				var data = {
					userID: userID,
					addressID: addressID,
					provinceName: tempAddr.split('-')[0],
					cityName: tempAddr.split('-')[1],
					countyName: tempAddr.split('-')[2],
					consigneeName: $("#name").val(),
					consigneePhone: $("#phone").val(),
					campus: $("#school").val(),
				}
			} else {
				var data = {
					userID: userID,
					provinceName: tempAddr.split('-')[0],
					cityName: tempAddr.split('-')[1],
					countyName: tempAddr.split('-')[2],
					consigneeName: $("#name").val(),
					consigneePhone: $("#phone").val(),
					campus: $("#school").val(),
				}
			}
			base.postData(url,data,saveAddressData);
		})
		function saveAddressData(data) {
			base.clearWait();
			if (data.success) {
				mui.toast(data.msg);
				setTimeout(function() {
					mui.back();
				}, 1000)
			} else {
				mui.toast(data.msg);
			}
		}
	</script>
</html>